<template>
  <div class="mainSelect">
    <!-- 查询功能模块 -->
    <div class="select">
      <el-form ref="form" :model="addEmployeeName" label-width="80px">
        <el-form-item label="姓名:">
          <el-input
            v-model="addEmployeeName.empName"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-input
            v-model="addEmployeeName.empJob"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用工性质:">
          <el-input
            v-model="addEmployeeName.empType"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-date-picker
            v-model="addEmployeeName.empHirDate"
            type="daterange"
            range-separator="至"
            :start-placeholder="startTimeInput"
            :end-placeholder="endTimeInput"
            style="width: 270px; margin-right: 15px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离职时间:">
          <el-date-picker
            v-model="addEmployeeName.empResTime"
            type="daterange"
            range-separator="至"
            :start-placeholder="startTimeInput"
            :end-placeholder="endTimeInput"
            style="width: 270px; margin-right: 15px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="selectEmployee">查询</el-button>
          <!-- <el-button type="success" @click="add" style="margin-right: 10px"
            >添加</el-button
          > -->
          <!-- <el-upload
            style="display: inline-block"
            action="https://jsonplaceholder.typicode.com/posts/"
            class="upload-demo"
            multiple
            :limit="3"
          > -->
          <el-button type="primary" style="margin-left: 20px" @click="upload"
            >上传<i class="el-icon-upload el-icon--right"></i
          ></el-button>
          <!-- </el-upload> -->
          <!-- 上传文件模态框 -->
          <el-dialog
            title="上传文件"
            :visible.sync="centerUploadDialogVisible"
            width="30%"
            center
          >
            <el-upload
              drag
              style="margin-left: 100px"
              class="upload-demo"
              ref="upload"
              accept=".xlsx, .xlsm, .xls"
              :auto-upload="false"
              action="#"
              :limit="1"
              :file-list="fileList"
              :on-change="handleChange"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerUploadDialogVisible = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="submitUpload">确 定</el-button>
            </span>
          </el-dialog>

          <el-button id="download" type="primary" @click="downloadFileList">
            下载当前页
          </el-button>
          <el-button id="download" type="primary" @click="downloadAllFile">
            下载全部
          </el-button>
          <el-button id="download" type="primary" v-print="'#print'">
            打印
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 展示查询员工的信息 -->
    <TableTemplate
      :header="header"
      :tableData="tableData"
      :title="title"
      @editInfo="editInfo"
      @add="add"
      @deleteEmployee="deleteEmployee"
      id="print"
    >
      <!-- <el-button
        size="mini"
        type="danger"
        @click="$emit('deleteEmployee', scope.row)"
        >删除</el-button
      > -->
    </TableTemplate>
    <!-- 分页功能 -->
    <Pagination
      :total="total"
      :employee="employee"
      @getCurrentPage="getCurrentPage"
      @getPageSize="getPageSize"
    />
    <!-- 点击添加按钮，弹出添加员工信息的弹窗 -->
    <!-- <el-dialog
      :title="title"
      :visible.sync="centerAddDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in header"
          :key="index"
        >
          <el-input
            v-model="addEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empHirDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="离职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empResTime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerAddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmployee">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 点击编辑按钮显示对应员工的信息 -->
    <el-dialog
      :title="title"
      :visible.sync="centerEditDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <!-- <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in header"
          :key="index"
        >
          <el-input
            v-model="editEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="姓名">
          <el-input
            v-model="editEmployeeName.empName"
            disabled
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input
            v-model="editEmployeeName.empJob"
            disabled
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input
            v-model="editEmployeeName.empSex"
            disabled
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="户口所在地">
          <el-input
            v-model="editEmployeeName.empFamiAddress"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input
            v-model="editEmployeeName.empDegree"
            disabled
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用工性质">
          <el-input
            v-model="editEmployeeName.empType"
            disabled
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作时长">
          <el-input
            v-model="editEmployeeName.empMonths"
            disabled
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="离职原因">
          <el-input
            v-model="editEmployeeName.empOutReal"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empHirDate"
              disabled
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="离职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empResTime"
              disabled
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showEditInfo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import data from "../json/dataTable.json";
export default {
  name: "EmployeeDimissionList",
  mounted() {
    // 页面一加载就获取所有员工的信息
    // this.tableData = this.employee.slice(0, this.pageSize);
    this.selectPagination();
  },
  data() {
    return {
      centerUploadDialogVisible: false,
      fileList: [], //文件列表
      file: {},
      employee: [],
      total: 0,
      tableData: [],
      pageSize: 4,
      currentPage: 1,
      header: {
        // empId: "序号",
        empName: "姓名",
        empJob: "岗位",
        empSex: "性别",
        empFamiAddress: "户口所在地",
        empDegree: "学历",
        empType: "用工性质",
        empHirDate: "入职时间",
        empResTime: "离职时间",
        empMonths: "工作时长",
        empOutReal: "离职原因",
      },
      adddialog: {
        empId: "序号",
        empName: "姓名",
        empJob: "岗位",
        empSex: "性别",
        empFamiAddress: "户口所在地",
        empDegree: "学历",
        empType: "用工性质",
        // empHirDate: "入职时间",
        // empResTime: "离职时间",
        empMonths: "工作时长",
        empOutReal: "离职原因",
      },
      addEmployeeName: {
        empId: "",
        empName: "",
        empJob: "",
        empSex: "",
        empFamiAddress: "",
        empDegree: "",
        empType: "",
        empHirDate: "",
        empResTime: "",
        empMonths: "",
        empOutReal: "",
      },
      editEmployeeName: {
        empId: "",
        empName: "",
        empJob: "",
        empSex: "",
        empFamiAddress: "",
        empDegree: "",
        empType: "",
        empHirDate: "",
        empResTime: "",
        empMonths: "",
        empOutReal: "",
      },
      title: "编辑离职员工的信息",
      //控制添加弹窗的显示与隐藏，当点击添加按钮是值变为true
      centerAddDialogVisible: false,
      centerEditDialogVisible: false,
      labelPosition: "right",
      startTimeInput: "开始日期",
      endTimeInput: "结束日期",
      startTime: "",
      endTime: "",
    };
  },
  methods: {
    // 分页查询请求数据
    selectPagination(data = {}) {
      this.$api.employeeDismission
        .getEmployeeConfirm(this.currentPage, this.pageSize, data)
        // .getEmployeeConfirm(data)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            let data = res.data.data;
            // this.employee = data.records;
            this.tableData = data.records;
            this.total = data.total;
          }
        });
    },
    // getCurrentPage 获取分页组件中传递过来的当前页page
    getCurrentPage(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // getPageSize   获取分页组件传递过来的每页显示多少条数据
    getPageSize(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // 显示添加员工信息的表单
    add() {
      this.centerAddDialogVisible = true;
    },
    // 点击编辑按钮显示编辑的信息
    editInfo(data) {
      this.centerEditDialogVisible = true;
      this.editEmployeeName = data;
      console.log(this.editEmployeeName);
    },
    //点击删除按钮删除员工信息
    deleteEmployee(data) {
      console.log(data);
      // 弹出确认列表
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(data);
          // 发送删除请求
          const res = this.$api.employeeDismission
            .delEmployee(data.empStaNum)
            .then((res) => {
              console.log(res);
              if (res.data.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.selectPagination();
              } else {
                this.$message({
                  type: "false",
                  message: "删除失败",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加该名员工的信息，发生Ajax请求
    // addEmployee() {
    //   this.centerAddDialogVisible = false;
    // },
    // 编辑完员工的信息后，发生请求
    showEditInfo() {
      this.centerEditDialogVisible = false;
      console.log(this.editEmployeeName, "------------------------------");
      // 发送编辑请求 改变户口和离职原因
      this.$api.employeeDismission
        // .changeInfo(this.editEmployeeName.empStaNum,this.editEmployeeName)
        .changeInfo(this.editEmployeeName)
        .then((res) => {
          console.log(res);
          // let data = res.data.data;
          if (res.data.code == 200) {
            // this.tableData = data;
            this.selectEmployee();
          }
        });
    },
    // 上传文件弹出模态框
    upload() {
      this.centerUploadDialogVisible = true;
    },
    //文件状态改变触发
    // 上传
    handleChange(file) {
      //(file,fileList)参数
      this.uploading = false;
      this.file = file;
    }, //文件超出个数限制
    handleExceed() {
      this.$message.warning("仅允许上传一个文件！");
    },
    submitUpload() {
      if (!this.file.size) {
        this.$message.warning("请选择上传的文件");
        return;
      }
      //  this.uploading = true;
      let formData = new FormData();
      formData.append("file", this.file.raw);
      // 发送上传文件请求
      this.$api.employeeDismission.upFileEmployee(formData).then((res) => {
        console.log(res);
        // console.log(res.data);
        if (res.status == 200) {
          if (res.data !== "success") {
            this.$message({
              type: "success",
              message: "上传成功，但是有些数据不对，请重新确认!",
            });

            const fileName = "上传失败原因.xls";
            const elink = document.createElement("a");
            if ("download" in elink) {
              elink.download = fileName;
              elink.style.display = "none";
              elink.href = window.URL.createObjectURL(res.data);
              document.body.appendChild(elink);
              elink.click();
              window.URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
            } else {
              navigator.msSaveBlob(blob, fileName);
            }
          } else {
            this.$message({
              type: "success",
              message: "上传成功！",
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "上传失败,请重新上传!",
          });
        }
        this.selectPagination();
      });
      this.centerUploadDialogVisible = false;
    },
    // 下载当前页请求
    downloadFileList() {
      this.$api.employeeDismission
        .downloadEmployee(this.currentPage, this.pageSize)
        .then((res) => {
          console.log(res);
          const fileName = "one.xls";
          const elink = document.createElement("a");
          if ("download" in elink) {
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = window.URL.createObjectURL(res.data);
            document.body.appendChild(elink);
            elink.click();
            window.URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
          } else {
            navigator.msSaveBlob(blob, fileName);
          }
        });
    },
    // 下载全部
    downloadAllFile() {
      this.$api.employeeDismission.downloadEmployeeConfirmList().then((res) => {
        console.log(res);
        const fileName = "all.xls";
        const elink = document.createElement("a");
        if ("download" in elink) {
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = window.URL.createObjectURL(res.data);
          document.body.appendChild(elink);
          elink.click();
          window.URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    // 接收子组件传递过来的数据 查询表格里面的数据
    updateTableData(tableData) {
      this.tableData = tableData;
    },
    // 分页查询
    selectEmployee() {
      if (this.selectEmployeeName.empHirDate) {
        let empHirDate = this.selectEmployeeName.empHirDate[0]
          .toLocaleDateString()
          .split("/")
          .join("-");
        let empHirDateLast = this.selectEmployeeName.empHirDate[1]
          .toLocaleDateString()
          .split("/")
          .join("-");
        console.log(empHirDate);
        console.log(empHirDateLast);
        this.selectEmployeeName.startDate = empHirDate;
        this.selectEmployeeName.endDate = empHirDateLast;
        console.log(this.selectEmployeeName);
      }
      this.selectPagination(this.addEmployeeName);
      // 清除选中框里的内容
      this.addEmployeeName = {};
    },
  },
};
</script>

<style scoped lang="less">
.select {
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      flex: 10%;
    }
  }
}
#download {
  margin-left: 20px;
  // width: 117px;
}
.el-input {
  width: 85px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-dialog {
  transform: translate(-50%, 50%);
  .el-form {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;
    .el-form-item {
      flex: 50%;
    }
  }
}
</style>
